<template>
	<div id="approval-page">
		
		<!-- 内容 -->
		<div class="a-content">
			<div class="a-c-top">
				<ul class="a-c-t-nav clearfix">
					<li class="left"><a href="#"><i class="icon iconfont icon-daiwoshenpide"></i><span>待办公文</span></a></li>
					<li class="left"><a href="#"><i class="icon iconfont icon-wofaqide"></i><span>我发起的</span></a></li>
					<li class="left norightborder"><a href="#"><i class="icon iconfont icon-chaosongwode"></i><span>待阅公文</span></a></li>
				</ul>
			</div>  		
  			<div class="a-c-centerbottom">
				<div class="buttons-row">
			    	<!-- 关联到第一个tab, 默认激活 -->
			    	<a href="#tab1" class="tab-link active button">待审批(<span>3</span>)</a>
			    	<!-- 关联到第二个tab -->
			    	<a href="#tab2" class="tab-link button">已审批</a>
			    </div>
			    <div class="tabs-animated-wrap">
				    <div class="tabs">
					    <!-- Tab 1, 默认激活 -->
					    <div id="tab1" class="tab active">
					    	<div class="clearfix a-c-t-search" v-show="!isShow&&!isSaw">
					    		<a class="left" href="#" v-on:click="toggle()"><i class="icon iconfont icon-sousuo"></i><span>搜索</span></a>
					    		<a class="right" href="#" v-on:click="saw()"><i class="icon iconfont icon-shaixuan"></i><span>筛选</span></a>
					    	</div>
					    	<div class="a-c-t-find" v-show="isShow">
					    		<div class="a-c-t-f-in"><input type="text" name="" placeholder="搜索"><span v-on:click="toggle()">取消</span></div>
					    		<ul class="a-c-t-f-result"></ul>
					    	</div>
					    	<div class="a-c-t-check" v-show="isSaw">
					    		<div class="a-c-t-c-title clearfix"><span class="disc left"></span><span class="left">类型</span></div>
					    		<ul class="a-c-t-c-type">
						    		<li :class="{'active':index==0}" v-for="(item,index) in arr" v-on:click="saw()">{{item.type}}</li>
						    	</ul>
					    	</div>
					    	<ul class="a-c-cb-nav" v-show="!isShow&&!isSaw">
			  					<li class="a-cb-detial">
			  						<a class="clearfix" href="/appovalDetial/">
				  						<i class="left icon iconfont icon-caiwu"></i>
				  						<ul class="left">
				  							<li class="a-cb-d-title">财务开支审批-陈XX-052256732</li>
				  							<li class="clearfix a-cb-d-information"><span class="left">姓名:姓名</span><span class="right">开始时间:2017-10-20</span></li>
				  							<li class="a-cb-d-information"><span>部门:采购部</span></li>
				  						</ul>
				  					</a>
			  					</li>
			  					<li class="a-cb-detial">
			  						<a class="clearfix" href="/appovalDetial/">
				  						<i class="left icon iconfont icon-yongche"></i>
				  						<ul class="left">
				  							<li class="a-cb-d-title">财务开支审批-陈XX-052256732</li>
				  							<li class="clearfix a-cb-d-information"><span class="left">姓名:姓名</span><span class="right">开始时间:2017-10-20</span></li>
				  							<li class="a-cb-d-information"><span>部门:采购部</span></li>
				  						</ul>
				  					</a>
			  					</li>
			  					<li class="a-cb-detial">
			  						<a class="clearfix" href="#">
				  						<i class="left icon iconfont icon-chalv-chuchashenqingS1"></i>
				  						<ul class="left">
				  							<li class="a-cb-d-title">财务开支审批-陈XX-052256732</li>
				  							<li class="clearfix a-cb-d-information"><span class="left">姓名:姓名</span><span class="right">开始时间:2017-10-20</span></li>
				  							<li class="a-cb-d-information"><span>部门:采购部</span></li>
				  						</ul>
				  					</a>
			  					</li>
			  				</ul>
					    </div>
					    <!-- Tab 2 -->
					    <div id="tab2" class="tab">
					    	<div class="clearfix a-c-t-search" v-show="!isSee&&!isLook">
					    		<a class="left" href="#" v-on:click="change()"><i class="icon iconfont icon-sousuo"></i><span>搜索</span></a>
					    		<a class="right" href="#" v-on:click="look()"><i class="icon iconfont icon-shaixuan"></i><span>筛选</span></a>
					    	</div>
					    	<div class="a-c-t-find" v-show="isSee">
					    		<div class="a-c-t-f-in"><input type="text" name="" placeholder="搜索"><span v-on:click="change()">取消</span></div>
					    		<ul class="a-c-t-f-result"></ul>
					    	</div>
					    	<div class="a-c-t-check" v-show="isLook">
					    		<div class="a-c-t-c-title clearfix"><span class="disc left"></span><span class="left">类型</span></div>
					    		<ul class="a-c-t-c-type">
						    		<li :class="{'active':index==0}" v-for="(item,index) in arr" v-on:click="look()">{{item.type}}</li>
						    	</ul>
					    	</div>
					    	<ul class="a-c-cb-nav" v-show="!isSee&&!isLook">
			  					<li class="a-cb-detial">
			  						<a class="clearfix" href="#">
				  						<i class="left icon iconfont icon-caiwu"></i>
				  						<ul class="left">
				  							<li class="a-cb-d-title">财务开支审批-陈XX-052256732</li>
				  							<li class="clearfix a-cb-d-information"><span class="left">姓名:姓名</span><span class="right">开始时间:2017-10-20</span></li>
				  							<li class="a-cb-d-information"><span>部门:采购部</span></li>
				  						</ul>
				  					</a>
			  					</li>
			  					<li class="a-cb-detial">
			  						<a class="clearfix" href="#">
				  						<i class="left icon iconfont icon-yongche"></i>
				  						<ul class="left">
				  							<li class="a-cb-d-title">财务开支审批-陈XX-052256732</li>
				  							<li class="clearfix a-cb-d-information"><span class="left">姓名:姓名</span><span class="right">开始时间:2017-10-20</span></li>
				  							<li class="a-cb-d-information"><span>部门:采购部</span></li>
				  						</ul>
				  					</a>
			  					</li>
			  					<li class="a-cb-detial">
			  						<a class="clearfix" href="#">
				  						<i class="left icon iconfont icon-caiwu"></i>
				  						<ul class="left">
				  							<li class="a-cb-d-title">财务开支审批-陈XX-052256732</li>
				  							<li class="clearfix a-cb-d-information"><span class="left">姓名:姓名</span><span class="right">开始时间:2017-10-20</span></li>
				  							<li class="a-cb-d-information"><span>部门:采购部</span></li>
				  						</ul>
				  					</a>
			  					</li>
			  				</ul>
					    </div>
					</div>
  				</div>
	  		</div>	    				
		</div>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return {
				isShow: false,
				isSee: false,
				isSaw: false,
				isLook: false,
				arr:[
					{ type:'全部' },
					{ type:'公务出差' },
					{ type:'公务用车' },
					{ type:'财务报销' },
					{ type:'内部审批' },
					{ type:'收文' },
					{ type:'发文' },
					{ type:'请假' }
					]
			}
		},


        mounted(){
            
        },
        
        methods: {
        	toggle:function(){
        		this.isShow=!this.isShow;
        	}, 
        	change:function(){
        		this.isSee=!this.isSee;
        	},
        	saw:function(){
        		this.isSaw=!this.isSaw;
        	},
        	look:function(){
        		this.isLook=!this.isLook;
        	}   

        }
	}
</script>